<!-- Swiper 样式 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
/>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- 图片滑块 -->
    <div class="swiper-slide"><img src="image1.jpg" alt="Image 1"></div>
    <div class="swiper-slide"><img src="image2.jpg" alt="Image 2"></div>
    <div class="swiper-slide"><img src="image3.jpg" alt="Image 3"></div>
    <div class="swiper-slide"><img src="image4.jpg" alt="Image 4"></div>
    <div class="swiper-slide"><img src="image5.jpg" alt="Image 5"></div>
    <div class="swiper-slide"><img src="image6.jpg" alt="Image 6"></div>
    <div class="swiper-slide"><img src="image7.jpg" alt="Image 7"></div>
  </div>
  <!-- 分页器 -->
  <div class="swiper-pagination"></div>
  <!-- 导航按钮 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<!-- Swiper 脚本 -->
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<style>
  .swiper-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.swiper-slide img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

</style>
<script>
  const swiper = new Swiper('.swiper-container', {
  slidesPerView: 6, // 默认显示 6 张（PC端）
  spaceBetween: 20, // 每张图片间距
  pagination: {
    el: '.swiper-pagination',
    clickable: true, // 分页器可点击
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  breakpoints: {
    // 768px 以下（移动端）
    768: {
      slidesPerView: 3, // 显示 3 张
      spaceBetween: 10, // 间距缩小
    },
    // 1200px 以下（平板端）
    1200: {
      slidesPerView: 4, // 显示 4 张
      spaceBetween: 15,
    },
  },
});

</script>